<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登陆</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			.container{
				width:300px;
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div>
				<h3>用户登录</h3>

				<div id="msg" style="display: none;">登陆成功!</div>

				<div class="form-group">
					<label>用户名：</label>
					<input type="text" class="form-control" autocomplete="off" placeholder="请输入用户名..." name="username" id="username" />
				</div>

				<div class="form-group">
					<label>密码：</label>
					<input type="password" class="form-control" placeholder="请输入密码..." name="password" id="password" />
				</div>

				<div>
					<button id="btnSubmit" onclick="doSubmit()" class="btn btn-success">登录</button>
					<button id="btClear" onclick="doClear()" class="btn btn-danger">清空</button>
				</div>

			</div>
	</body>

	<script>
		function doSubmit() {

			//获取用户名
			var username = document.getElementById("username");
			//console.log(username);      //对象
			console.log(username.value); //属性值

			//获取密码
			var password = document.getElementById("password");
			console.log(password.value);

			//获取到msg框，设置并展示新值，颜色
			var msg = document.getElementById("msg");
			msg.innerText = username.value + "登陆成功！"

			//改变msg样式
			msg.style = "display:block; color:blue; background-color: #A6E1EC;margin: 10px;padding: 10px";
		}

		function doClear() {
			document.getElementById("username").value = '';
			document.getElementById("password").value = "";
		}
	</script>
</html>
